<template>
  <div class="app-container">
    
    <!-- <div class="back">
      <el-button type="primary" @click="()=>{this.$router.go(-1)}" icon="el-icon-arrow-left">
          返回
      </el-button>
    </div> -->
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card>
          <div class="question-grid">
            <el-button 
              v-for="(item, index) in quList" 
              :key="index"
              :disabled="answeredQuestions.includes(index)"
              :type="answeredQuestions.includes(index) ? 'info' : 'primary'"
              @click="selectQuestion(item, index)"
            >
              <span class="question-number">{{ index + 1 }}</span>
              <span class="question-text">必答题</span>
              <!-- <span class="question-text">抢答题</span> -->
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-card style="width: 97.5%; margin-top: 10px;position: fixed; bottom: 10px;">
      <el-button type="primary" @click="()=>this.$router.go(-1)" icon="el-icon-arrow-left">
      </el-button>
      <el-button type="primary" @click="()=>this.$router.push({name:'QuickResponder'})" icon="el-icon-arrow-right" style="float: right;">
      </el-button>
    </el-card> -->
    
    <div class="btn">
      <el-button @click="()=>this.$router.go(-1)" icon="el-icon-arrow-left">
      </el-button>
      <el-button @click="()=>this.$router.push({name:'ListQuick'})" icon="el-icon-arrow-right" style="float: right;">
      </el-button>
    </div>

    <!-- 答题弹框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="80%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- <div slot="title" class="dialog-title">
        <span class="question-type">必答题</span>
        <span class="question-number">{{ currentQuestionIndex + 1 }}</span>
      </div> -->

      <div class="timer">剩余时间: {{ minutes }}:{{ seconds }}</div>
      
      <div class="question-content">
        <h3>{{ currentQuestion.content }}</h3>
      </div>

      <div class="options">
        <p>选项：</p>
        <el-checkbox-group v-model="checkList" >
          <el-checkbox 
            v-for="option in currentQuestion.options" 
            :key="option.value"
            :label="option.value"
          >
            <span>{{ option.label }}</span>
          </el-checkbox>
        </el-checkbox-group>
        <!-- <el-radio-group v-else v-model="radioAnswer">
          <el-radio 
            v-for="option in currentQuestion.options" 
            :key="option.value"
            :label="option.value"
          >
            {{ option.label }}
          </el-radio>
        </el-radio-group> -->
      </div>
      <div v-if="answerRidao" class="answer">
        <div class="answer-label">正确答案：</div>
        <div class="answer-content">
          <template v-if="Array.isArray(currentQuestion.correct)">
            <el-tag 
              v-for="(ans, index) in currentQuestion.correct" 
              :key="index"
              type="info"
              effect="dark"
              class="answer-tag"
            >
              {{ ans }}
            </el-tag>
          </template>
          <template v-else>
            <el-tag type="info" effect="dark" class="answer-tag">
              {{ currentQuestion.correct }}
            </el-tag>
          </template>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!answerRidao" type="primary" @click="showAanswer">显示答案</el-button>
        <el-button v-if="answerRidao" type="primary" @click="submitAnswer">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'IndexState',

  data() {
    return {
      quList: [
        {
          id: 1,
          content: '1、以下不属于特定对象的是',
          type: 'single',
          options: [
            { value: 'A', label: 'A.家庭暴力加害人' },
            { value: 'B', label: 'B.有严重不良行为未成年人' },
            { value: 'C', label: 'C.有严重刑事犯罪活动嫌疑的' },
            { value: 'D', label: 'D.被取保候审人' }
          ],
          correct: 'C'
        },
        {
          id: 2,
          content: '2、坚持"两队互为协同、一室支撑两队"，落实派出所主防责任，做好管控治安要素和防辖区发案、     、防治安事故（简称"一管三防"）等基础工作。',
          type: 'single',
          options: [
            { value: 'A', label: 'A.防极端事件' },
            { value: 'B', label: 'B.防暴力事件' },
            { value: 'C', label: 'C.防涉稳事端' },
            { value: 'D', label: 'D.防群体事件' }
          ],
          correct: 'C'
        },
        {
          id: 3,
          content: '3、牢固树立"派出所主防"理念，要求坚持把派出所工作置于     、     地位来抓。',
          type: 'multiple',
          options: [
            { value: 'A', label: 'A.核心性' },
            { value: 'B', label: 'B.战略性' },
            { value: 'C', label: 'C.重点性' },
            { value: 'D', label: 'D.基础性' }
          ],
          correct: ['B', 'D']
        },
        {
          id: 4,
          content: '4、以下不属于特定对象的是',
          type: 'single',
          options: [
            { value: 'A', label: 'A.家庭暴力加害人' },
            { value: 'B', label: 'B.有严重不良行为未成年人' },
            { value: 'C', label: 'C.有严重刑事犯罪活动嫌疑的' },
            { value: 'D', label: 'D.被取保候审人' }
          ],
          correct: 'C'
        },
        {
          id: 5,
          content: '5、以下不属于特定对象的是',
          type: 'single',
          options: [
            { value: 'A', label: 'A.家庭暴力加害人' },
            { value: 'B', label: 'B.有严重不良行为未成年人' },
            { value: 'C', label: 'C.有严重刑事犯罪活动嫌疑的' },
            { value: 'D', label: 'D.被取保候审人' }
          ],
          correct: 'C'
        },
        {
          id: 6,
          content: '6、以下不属于特定对象的是',
          type: 'single',
          options: [
            { value: 'A', label: 'A.家庭暴力加害人' },
            { value: 'B', label: 'B.有严重不良行为未成年人' },
            { value: 'C', label: 'C.有严重刑事犯罪活动嫌疑的' },
            { value: 'D', label: 'D.被取保候审人' }
          ],
          correct: 'C'
        },
        {
          id: 7,
          content: '7、以下不属于特定对象的是',
          type: 'single',
          options: [
            { value: 'A', label: 'A.家庭暴力加害人' },
            { value: 'B', label: 'B.有严重不良行为未成年人' },
            { value: 'C', label: 'C.有严重刑事犯罪活动嫌疑的' },
            { value: 'D', label: 'D.被取保候审人' }
          ],
          correct: 'C'
        },
        {
          id: 8,
          content: '8、以下不属于特定对象的是',
          type: 'single',
          options: [
            { value: 'A', label: 'A.家庭暴力加害人' },
            { value: 'B', label: 'B.有严重不良行为未成年人' },
            { value: 'C', label: 'C.有严重刑事犯罪活动嫌疑的' },
            { value: 'D', label: 'D.被取保候审人' }
          ],
          correct: 'C'
        },
        {
          id: 9,
          content: '9、以下不属于特定对象的是',
          type: 'single',
          options: [
            { value: 'A', label: 'A.家庭暴力加害人' },
            { value: 'B', label: 'B.有严重不良行为未成年人' },
            { value: 'C', label: 'C.有严重刑事犯罪活动嫌疑的' },
            { value: 'D', label: 'D.被取保候审人' }
          ],
          correct: 'C'
        },
        {
          id: 10,
          content: '10、以下不属于特定对象的是',
          type: 'single',
          options: [
            { value: 'A', label: 'A.家庭暴力加害人' },
            { value: 'B', label: 'B.有严重不良行为未成年人' },
            { value: 'C', label: 'C.有严重刑事犯罪活动嫌疑的' },
            { value: 'D', label: 'D.被取保候审人' }
          ],
          correct: 'C'
        },
        {
          id: 11,
          content: '11、以下不属于特定对象的是',
          type: 'single',
          options: [
            { value: 'A', label: 'A.家庭暴力加害人' },
            { value: 'B', label: 'B.有严重不良行为未成年人' },
            { value: 'C', label: 'C.有严重刑事犯罪活动嫌疑的' },
            { value: 'D', label: 'D.被取保候审人' }
          ],
          correct: 'C'
        },
        {
          id: 12,
          content: '12、以下不属于特定对象的是',
          type: 'single',
          options: [
            { value: 'A', label: 'A.家庭暴力加害人' },
            { value: 'B', label: 'B.有严重不良行为未成年人' },
            { value: 'C', label: 'C.有严重刑事犯罪活动嫌疑的' },
            { value: 'D', label: 'D.被取保候审人' }
          ],
          correct: 'C'
        },
      ],
      answeredQuestions: [], // 已答题目索引
      currentQuestionIndex: null,
      currentQuestion: {},
      dialogVisible: false,
      checkList: [], // 多选答案
      radioAnswer: '', // 单选答案
      timer: null,
      timeLeft: 60, // 3分钟 = 180秒
      minutes: '00',
      seconds: '60',
      answerRidao:false
    }
  },

  methods: {
    selectQuestion(question, index) {
      this.currentQuestion = question
      this.currentQuestionIndex = index
      this.dialogVisible = true
      this.timeLeft = 60
      this.checkList = []
      this.radioAnswer = ''
      this.startTimer()
    },

    startTimer() {
      if(this.timer) {
        clearInterval(this.timer)
      }
      
      this.timer = setInterval(() => {
        this.timeLeft--
        this.minutes = Math.floor(this.timeLeft / 60).toString().padStart(2, '0')
        this.seconds = (this.timeLeft % 60).toString().padStart(2, '0')
        
        if(this.timeLeft <= 0) {
          this.$message.warning('答题时间已到!')
          this.handleClose()
        }
      }, 1000)
    },

    handleClose() {
      if(this.timer) {
        clearInterval(this.timer)
      }
      this.answerRidao = false
      this.dialogVisible = false
      this.checkList = []
      this.radioAnswer = ''
    },

    showAanswer(){
      const isMultiple = this.currentQuestion.type === 'multiple'
      const answer = isMultiple ? this.checkList : this.radioAnswer
      
      // if((isMultiple && answer.length === 0) || (!isMultiple && !answer)) {
      //   this.$message.warning('请选择答案')
      //   return
      // }
      
      this.answeredQuestions.push(this.currentQuestionIndex)
      
      // 判断答案是否正确
      const correct = this.currentQuestion.correct
      const isCorrect = isMultiple 
        ? answer.length === correct.length && answer.every(a => correct.includes(a))
        : answer === correct
      
      if(isCorrect) {
        this.$message.success('回答正确!')
      } else {
        this.$message.error('回答错误!')
      }

      this.answerRidao = !this.answerRidao
    },

    submitAnswer() {
      // const isMultiple = this.currentQuestion.type === 'multiple'
      // const answer = isMultiple ? this.checkList : this.radioAnswer
      
      // // if((isMultiple && answer.length === 0) || (!isMultiple && !answer)) {
      // //   this.$message.warning('请选择答案')
      // //   return
      // // }
      
      // this.answeredQuestions.push(this.currentQuestionIndex)
      
      // // 判断答案是否正确
      // const correct = this.currentQuestion.correct
      // const isCorrect = isMultiple 
      //   ? answer.length === correct.length && answer.every(a => correct.includes(a))
      //   : answer === correct
      
      // if(isCorrect) {
      //   this.$message.success('回答正确!')
      // } else {
      //   this.$message.error('回答错误!')
      // }
      
      this.handleClose()
    }
  },

  beforeDestroy() {
    if(this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>

.app-container{
  width: 100%;
  height: 100%;
  background-image: url("/images/bg.png");
  background-size: cover;
  box-sizing: border-box;
  // padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back{
  margin-bottom: 10px;
}

.question-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 30px;
  padding: 150px;

  .el-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    height: auto;
    background: red;
    margin-left: 0;

    .question-number {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .question-text {
      font-size: 18px;
    }
  }
}

.dialog-title {
  display: flex;
  align-items: center;
  justify-content: center;
  
  .question-type {
    font-size: 36px;
    margin-right: 15px;
  }
  
  .question-number {
    font-size: 40px;
    font-weight: bold;
    color: #409EFF;
  }
}

.timer {
  text-align: center;
  font-size: 32px;
  color: #f56c6c;
  margin-bottom: 15px;
}

.question-content {
  margin-bottom: 5px;
  
  h3 {
    margin: 0;
    font-size: 30px;
    line-height: 1.5;
    color: #303133;
  }
}

.options {
  margin-top: 0px;
  
  p {
    margin-bottom: 5px;
    font-weight: bold;
    color: #606266;
    font-size: 26px;
  }

  .el-checkbox-group{
    font-size: 35px;
  }

  span{
    font-size: 26px;
  }

  .el-checkbox, .el-radio {
    display: block;
    margin-bottom: 20px;
    padding: 10px 20px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    transition: all 0.3s;
    font-size: 32px;
    
    &:hover {
      background-color: #f5f7fa;
    }
    
    &.is-checked {
      border-color: #409eff;
      background-color: #ecf5ff;
    }
  }
}

.answer {
  font-size: 32px;
  margin: 10px 0;
  text-align: center;
  display: flex;
  .answer-label {
    font-weight: bold;
    color: #303133;
    margin-bottom: 15px;
  }

  .answer-content {
    display: flex;
    justify-content: center;
    gap: 15px;
  }

  .answer-tag {
    font-size: 28px;
    padding: 10px 25px;
    border-radius: 6px;
    height: 45px;
  }
}

.el-button {
  &[disabled] {
    cursor: not-allowed;
  }
}

.dialog-footer {
  text-align: center;
  
  .el-button {
    padding: 15px 30px;
    font-size: 20px;
  }
}

.btn{
  width: 97.6%;
  bottom: 20px;
  position: fixed;
  opacity: 0.3;
  z-index: 1;
}

</style>